@bobular applied to SAM and adjusted layout. It seems to work fine for me. Here are screenshots:

@bobular step buttons are added. Tested with storybook and SAM. Some notes are:

• currently it is set to be 1 year as a step
• right arrow increases range.end and left arrow decreases range.start for now
• considered data min/max not to go over
• also added a function parameter to change number of years for step (default = 1 year)
• mouseover tooltip for each arrow is added

screenshots are:

• enabled
  

• disabled
  

@bobular Thank you for your reviews and comments. Yes some features are not implemented at storybook as there are some diff between storybook and actual one at SAM.

I will change the behavior of arrows next week as you suggested: I was also thinking of "window" :) As for the 4th item, I didn't notice a specific drift when playing with those buttons. Will see/test more when addressing your feedbacks.

One thing I am concerned is that for the example case I used (screenshots), the data range is over 100 years so the step of 1 year may be too small in such a case. Perhaps we can consider a sort of a dynamic step, e.g., data range/10? This may make user a confusion, though. On the other hand, 1 year may be okay as we also have date input/picker.

Hi @moontrip - is there a mock-up that says the step will be one year? I suggest it should be whatever the size of the selection is.

Thus after one click on ➡️ the window would move like this:

   [-------]
            [-------]

@bobular Aha I see. Thank you for your clarification. 👍

@bobular I addressed your feedbacks and committed them. Here is a short video capture, just in case: you can test it at your local more extensively :)

@bobular You might have missed this review as you were hectic to deal with others. Can you please take a look at this when you are available?

This works really nicely and the EDA/MapVEu code looks good :-)

If possible please could you

1. look into why the left/right arrows only get disabled after a "failed click" - is it possible to pre-empt this?
2. When setting a year-based range (e.g. 2005-01-01 to 2006-01-01) would it be possible to handle leap-years so that the ranges always stay on Jan 1st? Even if the code is a bit ugly I think this would be worthwhile.

@bobular Thank you for your reviews and suggestions 👍 Those suggestions seem to be quite tricky but I will see if I can address them 🤞

@bobular Your suggestions are addressed in some ways. For the first one, overall logic was changed to handle enabled/disabled, so it is now pre-emptive. For the second one that considers leap year, there are several edge cases to deal with, I suppose. Thus, what I did is to have a toggle button to move the range by year difference (please see a screenshot below) by ignoring month/date. For example when the toggle is on, a) 2007-01-01 to 2008-01-01 -> 2008-01-01 to 2009-01-01 (year 2008 is leap year so this becomes to 2008-12-31 if the toggle is off); b) 2007-01-01 to 2007-12-31 -> 2008-01-01 to 2008-12-31 (year difference is set to be 1 year at minimum)

perhaps the toggle label needs to be changed like Year range at least which needs some space arrangement for layout. I didn't do that yet because I want to see if this approach is alright.

By the way, vectorbase backend does not respond with map data but at least timeslider can be used for testing. It would be great if you can test it and share your thoughts.

Hi @moontrip - as I mentioned in Slack, I'm not too keen on the year-based-movement-toggle. One of the reasons is that we don't offer month- or week-based movement also (which I guess we could, but it would complicate the UI and implementation more than necessary IMO). Another is that it changes the stepping behaviour of the selected range in a way that's not very clear to users.

I had an idea while walking the dogs... It solves the issue of cleanly stepping through the years if the user has chosen Jan 1 as start and end dates (or any other identical start/end days of the year), without an extra toggle switch, and without explicitly checking to see if the user entered the same day-of-the-year as start and end dates.

Firstly we need a countLeapDays in date range function. Here's one that ChatGPT provided. It looks solid, but of course double-check.

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}

function countLeapDays(startDate, endDate) {
    const startYear = startDate.getFullYear();
    const endYear = endDate.getFullYear();
    let leapDayCount = 0;

    for (let year = startYear; year <= endYear; year++) {
        if (isLeapYear(year)) {
            const leapDay = new Date(year, 1, 29);
            if (leapDay >= startDate && leapDay <= endDate) {
                leapDayCount++;
            }
        }
    }

    return leapDayCount;
}

Then the main idea is to count the number of leap days in the current and next ranges and calculate the difference

  const deltaLeapDays = countLeapDays(newSelectedRange) - countLeapDays(selectedRange);

Then adjust the newSelectedRange.end by the number of days deficit/surplus.

Example:

Current range contains 2 leap days and has length 1500 days (e.g. 1 February 2024 to 11 March 2028). Next range contains 1 leap day. deltaLeapDays works out as -1. The next window length needs to be adjusted to have a length of 1499, achieved by subtracting one day from the end date. (Adjustments to the previous (left arrow) window need to be made to the newSelectedRange.start.)

There's an edge case where the current range is, for example, 2024-02-29 to 2024-02-29 (just one leap day). The new range would end up zero width, so we have to make sure the range is at least one day wide!

What do you reckon?

@bobular Thank you for your suggestion 👍 The logic looks reasonable so I will test it. Though the function is incorrect in part as the Date is not considered correctly :)

@bobular Ok it seems to work fine with your logic 👍 Here is a quick video capture: year 2008 is leap year

@bobular Thank you for your comments and suggestions. I will see if I can address those warnings: it is not always true to believe as it may sometimes cause issues (infinite loops for example).
By the way I am confused that the useEffect to deal with enabling/disabling arrows and those useState setter functions (setDisableLeftArrow and setDisableRightArrow) are all defined at TimeSliderQuickFilter where the arrow UI exists, not TimeSlider component? Did I miss or misunderstand something?

I'm not sure I follow but I think you could do something like this here

              setSelectedRange={(selectedRange) => {
                updateConfig({ ...config, selectedRange });
                setDisableLeftArrow(false);
                setDisableRightArrow(false);
              }}

Also, if required hook dependencies cause infinite loops that means the design should be revisited, in my opinion.

@bobular Thank you for your comments. I will check them out more carefully. 👍

@bobular I simplified codes which were originated from old logic. It would be great if you can check it out again. Thanks!